import Icon from '@/components/Icon'
import styles from './index.module.scss'
import useInitialState from '@/hooks/useInitialState'
import { getchannel, setActive, setAllchannel } from '@/store/actions/channel'
import { Popup, Tabs } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import Channels from './components/Channels/Channels'
import ArticleList from './components/ArticleList/ArticleList'
import { useHistory } from 'react-router-dom'


const Home = () => {
  const {channels,active} =useInitialState(getchannel,'channel')
  useInitialState(setAllchannel,'channel')
  const history = useHistory()
  const dispatch = useDispatch()
  const setactive=(id:string)=>{
    dispatch(setActive(id))
  }
  const [visible, setVisible] = useState(false)
  const hide = () => { setVisible(false) }
  return (
    // ...
    // 注意：此处别忘了添加 tabs 类名 注意：此处别忘了添加 tabs 类名 注意：此处别忘了添加 tabs 类名
    // {/* 频道 Tabs 列表 */}
  <div className={styles.root}>
    <Tabs className="tabs" activeLineMode="fixed" activeKey={active} onChange={setactive}>
      {channels.map(item=>(
      <Tabs.Tab title={item.name} key={item.id}>
        <ArticleList id={item.id}/>
      </Tabs.Tab>
      ))}
    </Tabs>

     <div className="tabs-opration">
     <Icon type="iconbtn_search" onClick={()=>history.push('/search')} />
     <Icon type="iconbtn_channel"  onClick={()=>setVisible(true) } />
   </div>
   {/* 从左边过来 */}
    <Popup position="left" visible={visible}>
      <Channels hide={hide} channels={channels} active={active}/>
    </Popup>
  </div>
  )
}
export default Home